​
<template>
  <div class="i-form">
    <el-form
      :ref="formRef??'ruleFormRef'"
      :model="model"
      :rules="rules"
      :inline="inline"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :style="formWidth"
    >
      <slot name="head" />
      <el-form-item
        v-for="(item, index) in elem"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :label-width="item.labelWidth"
        :style="item.style"
      >
        <!-- 输入框 -->
        <el-input
          v-if="!item.element"
          clearable
          :type="item.type"
          v-model="model[item.prop]"
          :placeholder="item.placeholder??`请输入${item.label}`"
          :size="item.size??'small'"
          :disabled="item.disabled"
          :readonly="item.readonly"
          :icon="item.icon"
          :suffix="item.suffix"
          :number="item.number"
          :rows="item.rows"
          :autosize="item.autosize"
          :style="item.elemWidth"
        />
        <!-- 数字输入框 -->
        <el-input-number
          v-if="item.element === 'number'"
          :max="item.max"
          :min="item.min"
          v-model="model[item.prop]"
          :placeholder="item.placeholder??`请输入${item.label}`"
          :size="item.size??'small'"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
        <!-- 下拉框选择器 -->
        <el-select
          v-if="item.element === 'select'"
          clearable
          v-model="model[item.prop]"
          :placeholder="item.placeholder??`请选择${item.label}`"
          :size="item.size??'small'"
          :disabled="item.disabled"
          :filterable="item.filterable"
          :multiple="item.multiple"
          :style="item.elemWidth"
          @on-change="(value) => $emit(`on-${item.events}`, value)"
        >
          <el-option
            v-for="(opt, index) in item.option"
            :key="index"
            :label="opt.label"
            :value="opt.value"
            :disabled="opt.disabled"
            >{{ opt.label }}</el-option
          >
        </el-select>
        <!-- 级联选择 -->
        <el-cascader
          v-if="item.element === 'cascader'"
          :data="item.data"
          :placeholder="item.placeholder??`请输入${item.label}`"
          v-model="model[item.prop]"
          :disabled="item.disabled"
          :filterable="item.filterable"
        />
        <!-- 日期选择器 -->
        <el-date-picker
          v-if="item.element === 'date'"
          clearable
          :type="item.type"
          v-model="model[item.prop]"
          :format="item.format"
          :placeholder="item.placeholder??`请输入${item.label}`"
          :size="item.size??'small'"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
        <!-- 时间选择器 -->
        <el-time-picker
          v-if="item.element === 'time'"
          clearable
          :type="item.type"
          v-model="model[item.prop]"
          :format="item.format"
          :placeholder="item.placeholder??`请输入${item.label}`"
          :size="item.size??'small'"
          :disabled="item.disabled"
          :style="item.elemWidth"
        />
        <!-- 单选框 -->
        <el-radio-group
          v-if="item.element === 'radio'"
          v-model="model[item.prop]"
          :label="item.label"
          :size="item.size??'small'"
        >
          <el-radio
            v-for="(opt, index) in item.option"
            :key="index"
            :label="opt.value"
            :size="item.size??'small'"
            :fill="item.fill"
            :disabled="opt.disabled"
            >{{ opt.label }}</el-radio
          >
        </el-radio-group>
        <!-- 多选框 -->
        <el-checkbox
          v-if="item.element === 'checkbox'"
          v-model="model[item.prop]"
          :label="item.value"
          :size="item.size??'small'"
          :disabled="item.disabled"
        />
      </el-form-item>
      <!-- 插槽 -->
      <el-form-item class="slotbox">
        <slot name="custom"/>
      </el-form-item>
      <el-form-item :label-width="btnLabelWidth" style="padding-left: 10px;">
        <el-button
          v-if="submit"
          :type="okType"
          :size="btnSize"
          :icon="okIcon"
          :long="btnLong"
          :loading="btnLoading"
          @click="handleSubmit(formRef??'ruleFormRef')"
        >
          {{ submitText }}
        </el-button>
        <el-button
          v-if="button"
          :type="btnType2"
          :size="btnSize"
          :icon="btnIcon2"
          :long="btnLong2"
          @click="handleClick"
          class="button"
          >{{ buttonText }}</el-button>
        <el-button
          v-if="reset"
          :type="btnType"
          :size="btnSize"
          :icon="btnIcon"
          :long="btnLong"
          @click="handleReset()"
          class="button"
          >{{ resetText }}</el-button>

        <slot name="footer"></slot>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRefs, onMounted, type PropType } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Delete, Edit } from "@element-plus/icons";
import type { ITEM } from './type'
export default {
  components: {
    Search,
  },
  name: "ikechen-form",
  props: {
    formWidth:{type:Object, default:{width:'100%'} },
    elem: { type: Array as any, default: [] },
    model:{ type: Object as any, default: {}}, // 表单数据对象
    formRef: String,
    rules: Object, // 表单验证对象
    width: Number, // 表单宽度
    labelWidth: { Number, default: "80px" }, // 表单域标签宽度
    labelPosition: {
      validator(value) {
        const validList = ["left", "right", "top"];
        for (let i = 0; i < validList.length; i++) {
          if (value === validList[i]) {
            return true;
          }
        }
        return false;
      },
      default: "right",
    }, // 表单域标签位置
    inline: {
      type: Boolean,
      default: true,
    }, // 行内表单模式
    loading: {
      type: Boolean,
      default: false,
    }, // 表单加载状态
    btnLabelWidth: Number, // 表单域标签的宽度(按钮区)
    submit: {
      type: Boolean,
      default: false,
    }, // 是否显示提交按钮
    reset: {
      type: Boolean,
      default: false,
    }, // 是否显示重置按钮
    button: {
      type: Boolean,
      default: true,
    }, // 是否显示普通按钮
    submitText: {
      type: String,
      default: "搜索",
    }, // 提交按钮文字
    resetText: {
      type: String,
      default: "重置",
    }, // 重置按钮文字
    buttonText: {
      type: String,
      default: "Button",
    }, // 普通按钮文字
    okType: {
      type: String,
      default: "primary",
    }, // 提交按钮类型
    btnType: String, // 普通按钮类型
    btnLong: Boolean, // 设置按钮的长度为 100%
    // 设置按钮的图标类型
    okIcon: String,
    btnIcon: String,
    btnLoading: {
      type: Boolean,
      default: false,
    }, // 按钮加载状态
    btnType2: {
      type: String,
      default: "primary",
    }, // 普通按钮类型
    btnSize: {
      type: String,
      default: "small",
    }, // 普通按钮类型
    btnLong2: Boolean, // 设置按钮的长度为 100%
    // 设置按钮的图标类型
    btnIcon2: String,
  },
  setup(props, { emit }) {
    const state = reactive({});
    const ruleFormRef = ref()
    const methods = {
      handleSubmit(ref?:string) {
        emit("onSuccess",props.model);
      },
      handleReset() {
        ruleFormRef.value.resetFields()
        emit("onReset");
      },
      handleClick() {
        emit("onClick");
      },
    };

    onMounted(() => {
    });
    return {
      ruleFormRef,
      ...toRefs(state),
      ...methods,
    };
  },
};
</script>

<style scoped lang="scss">
.i-form{
  .el-form>.el-form-item{
    margin-bottom: 10px !important;
  }
}

.slotbox{
  margin: 10px 0 !important;
}
</style>
